<template>
    <div class="porder">
        <div class="pordertitle">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <span class="pot1">筛选：</span>
                        <el-dropdown>
                            <span class="el-dropdown-link">
                            {{dropdownValue}}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="changedropvalue('全部订单')">全部订单</el-dropdown-item>
                                <el-dropdown-item @click.native="changedropvalue('待处理订单')">待处理订单</el-dropdown-item>
                                <el-dropdown-item @click.native="changedropvalue('已完成订单')">已完成订单</el-dropdown-item>
                                <el-dropdown-item @click.native="changedropvalue('已作废订单')">已作废订单</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-col>
                <el-col :span="12" style="text-align: right;">
                    <div class="grid-content bg-purple">
<!--                        <el-button type="primary" style="background-color: #099FB8" @click="dialogVisible = true">新增</el-button>-->
                        <el-button type="primary" style="background-color: #099FB8" @click="gotoaddorder">新增</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="pordertable">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-table
                                :cell-style="rowClass"
                                :header-cell-style="headClass"
                                border
                                :data="currentData"
                                style="width: 100%;height: 400px">
                            <el-table-column
                                    label="单号"
                                    width="180">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ scope.row.orderNumber}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="制单人"
                                    width="80">
                                <template slot-scope="scope">
                                    {{scope.row.creator}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="金额"
                                    width="100">
                                <template slot-scope="scope">
                                    {{scope.row.orderMainPrice}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="收获地址"
                                    width="210">
                                <template slot-scope="scope">
                                    <el-popover v-if="scope.row.orderAuditStatus===6" trigger="hover" placement="top">
                                            无数据
                                    </el-popover>
                                    <el-popover v-else trigger="hover" placement="top">
                                        <p>姓名: {{ scope.row.receivingInfo.clientName }}</p>
                                        <p>住址: {{ scope.row.receivingInfo.receivingAddress }}</p>
                                        <div slot="reference" class="name-wrapper">
                                            <el-tag size="medium">{{ scope.row.receivingInfo.receivingAddress }}</el-tag>
                                        </div>
                                    </el-popover>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="出库/发货"
                                    width="140">
                                <template slot-scope="scope">
                                    {{scope.row.out}}/
                                    {{scope.row.receipt}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="审核状态"
                                    width="100"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.orderAuditStatus}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="付款状态"
                                    width="100"
                            >
                                <template slot-scope="scope">
                                    {{scope.row.collectStatus}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                            >
                                <template slot-scope="scope">
                                    <el-button
                                            class="details"
                                            size="mini"
                                            @click="handleEdit(scope.$index, scope.row)">订单详情</el-button>
                                    <el-button
                                            class="fukuan"
                                            size="mini"
                                            @click="handlefukuan(scope.$index, scope.row)">付款</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="5"
                :pager-count="7"
                :total="pageNum"
                @current-change="changePage"
                :current-page="currentPage">
        </el-pagination>
        <el-dialog
                title="新增订货单"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <label for="staffname">
                制单人：
                <el-input v-model="inputValue_satffname" id="staffname" style="margin-left: 15px" placeholder="请输入制单人"/>
            </label>
            <br>
            <label for="money">
                金额：
                <el-input v-model="inputValue_money" id="money" style="margin-left: 30px" placeholder="请输入金额"/>
            </label>
            <br>
            <label for="name">
                收货地址：
                <el-input v-model="inputValue_name" id="name" style="margin-left: 3px" placeholder="请输入收货人名字"/>
            </label>
            <br>
            <label for="address">
                收货地址：
                <el-input v-model="inputValue_address" id="address" style="margin-left: 3px" placeholder="请输入收货地址"/>
            </label>
            <br>
            <label for="state1">
                出库/发货：
                <el-input v-model="inputValue_state1" id="state1" style="margin-left:-3px" disabled />
            </label>
            <br>
            <label for="state2">
                审核状态：
                <el-input v-model="inputValue_state2" id="state2" disabled />
            </label>
            <br>
            <label for="state3">
                付款状态：
                <el-input v-model="inputValue_state3" id="state3" disabled />
            </label>
            <br>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addorder">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="当前只支持银行卡付款"
                :visible.sync="dialogVisible2"
                width="30%"
                :before-close="handleClose2">
                <label for="fukuanmoney">
                    付款金额：
                    <el-input v-model="inputValue_fkmoney" id="fukuanmoney" style="margin-left: 3px" disabled/>
                </label>
                <br>
                <label>
                    账户类型：
                    <el-select name="zhtype" v-model="selectValue1" placeholder="请选择账户类型" style="margin-left: 3px">
                        <el-option
                                v-for="item in selectoptions"
                                :key="item.accountType"
                                :label="item.accountType"
                                :value="item.accountType"
                                @click.native="changeselectvalue(item.accountType)"
                        >
                        </el-option>
                    </el-select>
                </label>
                <br>
                <label for="zhname">
                    账号余额：
                    <el-input v-model="inputValue_zhmoney" id="zhname" style="margin-left: 3px"  disabled/>
                </label>
                <br>
<!--                <label for="khbank">-->
<!--                    开户银行：-->
<!--                    <el-input v-model="inputValue_bankname" id="khbank" style="margin-left: 3px" placeholder="请输入开户银行"/>-->
<!--                </label>-->
<!--                <br>-->
<!--                <label for="khzh">-->
<!--                    开户账号：-->
<!--                    <el-input v-model="inputValue_khzh" id="khzh" style="margin-left: 3px" placeholder="请输入开户账号"/>-->
<!--                </label>-->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="fukuan">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
    import router from "../../router";
    import {mapActions,mapGetters} from 'vuex'
    export default {
        name: "PurchaseOrder",
        data(){
            return {
                dropdownValue:'全部订单',
                dialogVisible: false,
                dialogVisible2: false,
                inputValue_satffname:'',
                inputValue_money:'',
                inputValue_name:'',
                inputValue_address:'',
                inputValue_state1:'备货中/待发货',
                inputValue_state2:'待订单审核',
                inputValue_state3:'未付款',
                inputValue_zhmoney:'',
                inputValue_fkmoney:'',
                inputValue_zhname:'',
                inputValue_bankname:'',
                inputValue_khzh:'',
                selectoptions: [],
                orderMainId:"",
                payStatusName:'',
                selectValue: '',
                selectValue1: '',
                currentPage:1,
                allcount:20,



                tableData: [{
                    danhao: '12345',
                    staffname: '王小虎',
                    money:'2219',
                    name:'李四',
                    address: '上海市普陀区金沙江路 1518 弄',
                    state1:'备货中/待发货',
                    state2:'待订单审核',
                    state3:'未付款',
                }, {
                    danhao: '000002',
                    staffname: '王小虎',
                    money:'3330',
                    name:'李四',
                    address: '上海市普陀区金沙江路 1517 弄',
                    state1:'备货中/待发货',
                    state2:'待订单审核',
                    state3:'未付款',
                }, {
                    danhao: '000003',
                    staffname: '王小虎',
                    money:'2219',
                    name:'李四',
                    address: '上海市普陀区金沙江路 1519 弄',
                    state1:'备货中/待发货',
                    state2:'待订单审核',
                    state3:'已付款',
                }, {
                    danhao: '000004',
                    staffname: '王小虎',
                    money:'2219',
                    name:'李四',
                    address: '上海市普陀区金沙江路 1516 弄',
                    state1:'备货中/待发货',
                    state2:'待订单审核',
                    state3:'未付款',
                },{
                    danhao: '000005',
                    staffname: '王小虎',
                    money:'2219',
                    name:'李四',
                    address: '上海市普陀区金沙江路 1516 弄',
                    state1:'备货中/待发货',
                    state2:'待订单审核',
                    state3:'未付款',
                }]
            }
        },
        computed:{

            currentData(){
               return this.getorderdata()
               // //  this.$store.orderStore
               //  console.log(this.$store.state.orderStore.orderdata)
               // return this.$store.state.orderStore.orderdata
            },
            pageNum(){
                // return this.$store.state.orderStore.allorderconut
                return this.getordercount()
            }
        },
        methods: {
            ...mapGetters(['getorderdata','getordercount']),
            ...mapActions(['changeordernumber','getOrderData','accountmoney','fukuanmoney']),
            handleEdit(index, row) {
                console.log(index, row);
                let orderMainId=row.orderNumber
                let clientId=sessionStorage.getItem('clientId')
                let obj={orderMainId,clientId}
                this.changeordernumber(obj)
                // router.push('/Main/Order/OrderDetails')
                this.$router.push('/Main/Order/OrderDetails');
            },
            handlefukuan(index, row) {
                console.log(index);/*下标 每一项*/
                console.log(row);
                /*判断如果的未付款才可以点击付款，否则提示已付款*/
                if(row.collectStatus==='未付款'){
                    this.dialogVisible2 = true
                    this.inputValue_fkmoney=row.orderMainPrice
                    /*查账户和余额*/
                    let obj={
                        clientId:sessionStorage.getItem('clientId'),
                        orderNumber:row.orderNumber
                    }
                    this.accountmoney(obj).then(res=>{
                        this.selectoptions.push(...res.client.accountList)
                    })
                    /*请求后台 改变付款状态，然后情况付款弹窗的每一项*/
                }else {
                    this.$message('该订单已经付过款了');
                }
            },
            changeselectvalue(value){
                console.log(value)
                if(value==='预付款账户'){
                    for(let i=0;i<this.selectoptions.length;i++){
                        if(value===this.selectoptions[i].accountType){
                            this.inputValue_zhmoney=this.selectoptions[i].accountCapital
                            this.payStatusName=this.selectoptions[i].accountType
                        }
                    }
                }else if(value==='现金账户'){
                    for(let i=0;i<this.selectoptions.length;i++){
                        if(value===this.selectoptions[i].accountType){
                            this.inputValue_zhmoney=this.selectoptions[i].accountCapital
                            this.payStatusName=this.selectoptions[i].accountType
                        }
                    }

                }else if(value==='返点账户'){
                    for(let i=0;i<this.selectoptions.length;i++){
                        if(value===this.selectoptions[i].accountType){
                            this.inputValue_zhmoney=this.selectoptions[i].accountCapital
                            this.payStatusName=this.selectoptions[i].accountType
                        }
                    }
                }
            },
            // 表头样式设置
            headClass () {
                return 'text-align: center;background:#F5F6F7;'
            },
            // 表格样式设置
            rowClass () {
                return 'text-align: center;'
            },
            changePage(val){
                this.currentPage=val
                /*传当前页和需要几页*/
                if(this.selectValue===""){
                    this.selectValue=0
                }
                let obj={
                    clientId: sessionStorage.getItem('clientId'),//获取客户（登陆者的）id
                    condition: {
                        currentPage: this.currentPage,
                        perSize: 5,
                        selectValue: this.selectValue
                    }
                }
                this.getOrderData(obj)
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            handleClose2(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            addorder(){
                this.dialogVisible = false
                let inputValue_satffname=this.inputValue_satffname
                let inputValue_money=this.inputValue_money
                let inputValue_name=this.inputValue_name
                let inputValue_address=this.inputValue_address
                let inputValue_state1=this.inputValue_state1
                let inputValue_state2=this.inputValue_state2
                let inputValue_state3=this.inputValue_state3

                let obj={inputValue_satffname,inputValue_money,inputValue_name,inputValue_address,inputValue_state1,inputValue_state2,inputValue_state3}
                console.log(obj)
            },
            gotoaddorder(){
                this.$router.push('/Main/Order/AddNewOrder')
            },
            fukuan(){
                if(this.inputValue_zhmoney>=this.inputValue_fkmoney){
                    /*这里也是请求后台付款接口*/
                    let obj={
                        collectAccount:"天地银行",
                        notes:'备注',
                        orderMainId:this.orderMainId,
                        payMoney:this.inputValue_fkmoney,
                        payStatus: {                        //支付方式
                            payStatusName:this.payStatusName  //支付方式名称
                        },
                        payStatusId:0
                    }
                    this.fukuanmoney(obj).then(res=>{
                        if(res===200){
                            this.$message.success('付款成功');
                            this.dialogVisible2 = false
                        }else {
                            this.$message.error('系统错误')
                            this.dialogVisible2 = true
                        }
                    })
                }else{
                    this.$message.error('余额不足，请重新选择账号')
                    this.dialogVisible2 = true
                }
            },
            changedropvalue(value){
                /*注意这里传的是value*/
                if(value==='全部订单'){
                    this.dropdownValue=value
                    this.selectValue=value
                }else if(value==='待处理订单'){
                    this.dropdownValue=value
                    this.selectValue=value
                }else if(value==='已完成订单'){
                    this.dropdownValue=value
                    this.selectValue=value
                }else if(value==='已作废订单'){
                    this.dropdownValue=value
                    this.selectValue=value
                }
                if(this.selectValue==='全部订单'){
                    this.selectValue=0
                }else if(this.selectValue==='待处理订单'){
                    this.selectValue=1
                }else if(this.selectValue==='已完成订单'){
                    this.selectValue=2
                }else if(this.selectValue==='已作废订单'){
                    this.selectValue=3
                }
                console.log(this.selectValue)
                let obj={
                    clientId: sessionStorage.getItem('clientId'),//获取客户（登陆者的）id
                    condition: {
                        currentPage: this.currentPage,
                        perSize: 5,
                        selectValue:this.selectValue
                    }
                }
                this.getOrderData(obj).then()
            }
        },
        created() {
            let obj={
                clientId: sessionStorage.getItem('clientId'),//获取客户（登陆者的）id
                condition: {
                    currentPage: this.currentPage,
                    perSize: 5,
                    selectValue: 0
                }
            }
            console.log(obj)
            this.getOrderData(obj)
        },
    }
</script>

<style scoped>
    .pordertitle{
        margin: 20px 0;
    }
    .el-dropdown{
        color: #606266;
        font-size: 14px;
    }
    .pot1{
        color: #606266;
        font-size: 14px;
        margin-left: 10px;
    }
    .pot2{
        color: #606266;
        font-size: 14px;
        margin-left: 15px;
     }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .el-table-column{
        text-align: center;
        background-color: #F5F6F7;
    }
    .details,.fukuan{
        color: white;
        background-color: #099FB8;
    }
    .el-pagination{
        text-align: center;
        margin-top: 20px;
    }
    .el-input{
        margin: 10px 0;
        width: 215px;
    }

</style>